<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>不同时间作品数</title>

    <script src="echarts.js"></script>
    <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
</head>

<body>
<!-- 为 ECharts 准备一个具备大小的 DOM 容器 -->
<div id="lineChart" style="width: 600px; height: 400px;"></div>

<script>
    // 创建 XMLHttpRequest 对象用于读取 CSV 文件
    const xhr = new XMLHttpRequest();
    xhr.open('GET', '../output/mengBatch1.csv/part-00000-9afd9db6-ebb0-4633-b819-cd32e6cda2b7-c000.csv', true);
    xhr.onload = function () {
        if (this.status === 200) {
            const csvData = this.responseText;
            // 解析 CSV 数据
            const rows = csvData.split('\n').map(row => row.split(',').map(item => item.trim()));
            const headers = rows[0];
            const dataRows = rows.slice(1).filter(row => row.length === 3); // 过滤有效数据行

            // 处理数据：按操作系统和来源渠道分组统计用户数
            const osMap = new Map(); // 存储操作系统对应的来源渠道数据
            const sources = new Set(); // 收集所有来源渠道

            dataRows.forEach(row => {
                const os = row[0];
                const source = row[1];
                const count = parseInt(row[2], 10) || 0;

                sources.add(source);
                if (!osMap.has(os)) {
                    osMap.set(os, new Map());
                }
                const sourceMap = osMap.get(os);
                sourceMap.set(source, (sourceMap.get(source) || 0) + count);
            });

            // 转换为图表所需格式
            const osList = Array.from(osMap.keys());
            const sourceList = Array.from(sources);

            // 准备系列数据（每个来源渠道作为一个系列）
            const series = sourceList.map(source => {
                return {
                    name: source,
                    type: 'bar',
                    data: osList.map(os => osMap.get(os).get(source) || 0)
                };
            });

            // 初始化 ECharts 实例
            const myChart = echarts.init(document.getElementById('lineChart'));

            // 指定图表的配置项和数据
            const option = {
                title: {
                    text: '不同操作系统用户的来源渠道分布'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: sourceList, // 显示来源渠道图例
                    top: 30
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: osList,
                    name: '操作系统' // 操作系统
                },
                yAxis: {
                    type: 'value',
                    name: '用户数' // 用户数
                },
                series: series
            };

            // 使用配置项显示图表
            myChart.setOption(option);

            // 响应窗口大小变化，自动调整图表
            window.addEventListener('resize', () => {
                myChart.resize();
            });
        }
    };
    xhr.send();
</script>
</body>
</html>